<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!--<link href="/css/bootstrap.min.css" rel="stylesheet"/>-->
    <script src="/js/jquery.min.js"></script>
    <!--<script src="/js/bootstrap.min.js"></script>-->
    <!-- ZUI 标准版压缩后的 CSS 文件 -->·
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css">

    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/js/zui.min.js"></script>
</head>
<style type="text/css">
    html,body{
        width:100%;
        height:100%
    }
    body{
        background:url("/img/back_img_2.jpg") no-repeat;
        background-size: 100%;
    }
</style>
<body >
    <div style="width: 30%;height: 40%;margin-left: 60%;margin-top: 10%;">
        <div class="panel panel-default">
            <!--<div class="panel-heading" style="text-align: center">用户登陆</div>-->
            <div class="panel-body">
                <div class="form form-horizontal" style="margin-top: 5%">
                    <div class="form-group">
                        <label class="control-label col-sm-3">用户名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="username" id="username"/>
                        </div>
                        <div class="col-sm-2">
                            <i class="icon icon-exclamation-sign icon-2x" style="color: red" id="alarm4Username"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" name="password" id="password">
                        </div>
                        <div class="col-sm-2">
                            <i class="icon icon-exclamation-sign icon-2x" style="color: red" id="alarm4Password"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">验证码</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="kaptchaText" id="kaptchaText">
                        </div>
                        <div class="col-sm-4">
                            <img  alt="验证码" onclick="this.src='/defaultKaptcha'" src="/defaultKaptcha">
                        </div>
                        <div class="col-sm-2">
                            <i class="icon icon-exclamation-sign icon-2x" style="color: red" id="alarm4Kaptcha"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-7">

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-3">
                            <input type="checkbox" name="rememberMe" id="rememberMe">
                            <label class="control-label">记住我</label>
                        </div>
                        <div class="col-sm-5">
                            <a href="register">没有账号？立即注册</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-7" style="display: block">
                            <button  class="btn btn-primary btn-block" id="confirmBtn">立即登陆</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>

<script>

    $(function () {
        //初始化不显示警告信息
        $("#alarm4Username").hide();
        $("#alarm4Password").hide();
        $("#alarm4Kaptcha").hide();
        //给验证码输入框绑定回车按键事件
        $("#kaptchaText").keydown(function(e){
            if(e.keyCode == 13){
                login()
            }
        })
    })

    function login(){
        var username = $("#username").val();
        var password = $("#password").val();
        var rememberMe = $("#rememberMe").is(":checked");
        var kaptchaText = $("#kaptchaText").val();
        if(username=="" || password == "" || kaptchaText == ""){
            new $.zui.Messager("好像还有信息没输入哦~", {
                type: 'danger' // 定义颜色主题
            }).show();
            return
        }
        var data = {
            username:username,
            password:password,
            rememberMe:rememberMe,
            kaptchaText:kaptchaText
        }
        $.post('/doLogin',data,function(data){
            if(data.retCode != 0){
                new $.zui.Messager(data.retMsg, {
                    type: 'danger' // 定义颜色主题
                }).show();
            }else{
                window.location.href="/index"
            }
        });
    }

    $("#confirmBtn").click(function () {
        login()
    })

    $("#username").blur(function () {
        var username = $.trim($("#username").val())
        if(username == ""){
            $("#alarm4Username").show()
        }else{
            $("#alarm4Username").hide()
        }
    })

    $("#password").blur(function () {
        var password = $.trim($("#password").val())
        if(password == ""){
            $("#alarm4Password").show();
        }else{
            $("#alarm4Password").hide();
        }
    })

    $("#kaptchaText").blur(function () {
        var kaptchaText = $.trim($("#kaptchaText").val())
        if(kaptchaText == ""){
            $("#alarm4Kaptcha").show()
        }else {
            $("#alarm4Kaptcha").hide()
        }
    })

</script>

</html>